<script setup>
import { useVueFlow } from '@vue-flow/core';
import { NodeResizer } from '@vue-flow/node-resizer';

const props = defineProps({
  id: {
    type: String,
    required: true,
  },
  data: {
    type: Object,
  },
})

const { removeNodes, updateNodeData } = useVueFlow()

function onSelect(color) {
  updateNodeData(props.id, { color, isGradient: false })
}

function onGradient() {
  updateNodeData(props.id, { isGradient: true })
}

const dataRef = ref(props.data)
</script>

<template>
  <NodeResizer
    min-width="500"
    min-height="500"
    color="#000"
    lineStyle="border-style: dashed;
    border-width: 1px;
    border-color: black;"
  />

  <div class="node-group-div">
    <VsRow>
      <VsCol
        vs-type="flex"
        vs-justify="center"
        vs-align="center"
        vs-w="12"
      >
        &nbsp;
        {{ dataRef.name }}
        
        <!-- <div @click.stop.prevent="() => removeNodes(props.id)" style="position: absolute;inset-block-start: 10px;inset-inline-end: 0;">
          <Icon
            name="close"
            style="position: absolute;inset-inline-end: 10px;"
          />
        </div> -->
        
      </VsCol>
    </VsRow>
  </div>
</template>

<style>
.node-group-div{
  padding: 10px;
  background-color: rgba(16, 185, 129, 50%);
  block-size: 100%;
  color: #000;
  inline-size: 100%;
}

.icon-close{
  position: absolute;
  inset-inline-end: 10px;
}

.ivy-dashed-border {
  border: 2px solid transparent;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><path d='M 0,5 L 10,5' stroke='%23000' stroke-width='2' stroke-dasharray='5, 5'/></svg>");
  background-position: center;
  background-repeat: repeat-x;
}
</style>
